<template  slot-scope="scope">
    <el-form ref="form" :model="form"   :rules="formRules" label-width="80px"
             style="margin:20px;width:60%;min-width:600px;">
        <el-form-item label="活动名称"  prop="actName">
            <el-input v-model="form.actName"  placeholder="请输入活动名称"   style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="活动地址"  prop="actAddress">
            <el-input v-model="form.actAddress" placeholder="请输入活动地址"  style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="联系电话"  prop="actPhone">
            <el-input v-model="form.actPhone"  placeholder="请输入参加活动的联系电话"  style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="6">
                <el-date-picker type="date" placeholder="开始时间" v-model="form.actStartDate"
                                style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1" style="text-align: center">-</el-col>
            <el-col :span="6">
                <el-date-picker type="date" placeholder="结束时间" v-model="form.actOldDate"
                                style="width: 100%;"></el-date-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="类别">
            <el-radio-group v-model="form.actType">
                <el-radio label="school" >高校</el-radio>
                <el-radio label="compony" >机构</el-radio>
                <el-radio label="teacher" >讲师</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="人数上限">
            <el-input v-model="form.actMaxNum" type="number" style="width: 50%;"></el-input>（人）
        </el-form-item>
        <el-form-item label="活动详情" prop="actSummary">
            <el-input type="textarea" v-model="form.actSummary" :rows="4" placeholder="请输入活动的详细介绍"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="actImg">
            <el-upload
                    class="avatar-uploader"
                    action="api/upload/img"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="actImg" :src="actImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__tip" slot="tip" style="text-align: center;width: 300px">只能上传jpg文件，且不超过2M</div>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">发布</el-button>
            <el-button @click.native.prevent>取消</el-button>
        </el-form-item>

    </el-form>
</template>

<script>
    import  util from '../../common/js/util'
    import  axios from 'axios'
    import {  postActAdd} from '../../api/api';
    export default {
        data() {
            return {
                listLoading:false,
                form: {
                    actName: '',
                    actPhone: '',
                    actAddress: '',
                    actStartDate: util.getCurrentTime(''),
                    actOldDate: util.getCurrentTime(''),
                    actType: 'school',
                    actSummary: '',
                    actMaxNum:10,
                    actImg:'',
                    actDelete:0,
                    actUserId:JSON.parse(sessionStorage.getItem("user")).id,
                    actUserName: JSON.parse(sessionStorage.getItem("user")).name,
                    actNum:0
                },
                actImg:'',
                formRules: {
                    actName: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' }
                    ],
                    actPhone: [
                        { required: true, message: '请输入联系方式', trigger: 'blur' }
                    ],
                    actAddress: [
                        { required: true, message: '请输入详细地址', trigger: 'blur' }
                    ],
                    actSummary: [
                        { required: true, message: '请输入活动详情', trigger: 'blur' }
                    ],
                    actImg: [
                        { required: true, message: '请上传图片', trigger: 'blur' }
                    ]
                },
            }
        },
        methods: {
            onSubmit() {
                this.$refs.form.validate((valid) =>{
                    if (valid){
                        this.$confirm('确认发布吗？', '提示', {}).then(() => {
                            let para = Object.assign({}, this.form);
                            para.actStartDate= util.getCurrentTime(para.actStartDate);
                            para.actOldDate= util.getCurrentTime(para.actOldDate);
                            //console.log(para);
                            postActAdd(para).then((res) => {
                                util.getMessage(res,this,"发布成功");
                                this.$refs['form'].resetFields();
                            });
                        });
                    }
                })

            },
            handleAvatarSuccess(res, file) {
                let param = new FormData();
                param.append('img', file.raw);
                let config = {
                    headers: { 'Content-Type': 'multipart/form-data' }
                };
                axios.post("/api/upload/img",param,config).then(res => {
                    //console.log(res);
                    this.form.actImg = 'api/'+res.data.body;
                    this.actImg =  this.form.actImg
                    //console.log(this.form.newsImg);
                })
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }

</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 300px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 300px;
        height: 178px;
        display: block;
    }
</style>